<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
    <style type="text/css">
        .ancestores *
        {
            display: block;
            border: 2px solid lightgrey;
            color: lightgrey;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>
<div class="ancestores">
    <div style="width: 500px">div(曾祖父元素)
        <ul>ul(祖父元素)
            <li>li()父元素
                <span class="green">span</span>
                <p>p元素</p>
                <h5>这个一个标题</h5>
                <h6>这是另外一个标题</h6>
            </li>
        </ul>
    </div>


    <div style="width: 500px">div(祖父元素)
        <p class="1">p(父元素)
            <span>span</span>
        </p>
        <p>p(兄弟元素)</p>
    </div>
</div>






<script src="jquery-3.2.1.js"></script>
<script src="jQuery-ForIn.js"></script>
</body>
</html>